<template>
  <div style="height: 100%">
    <vue-jsoneditor
      height="800"
      mode="tree"
      v-model:json="jsonData"
      :darkTheme="isDark"
      :mainMenuBar="false"
    />
  </div>
</template>

<script lang="ts" setup>
import { ref, watch, onMounted } from "vue";
import VueJsoneditor from "vue3-ts-jsoneditor";
import { useDark } from "@vueuse/core";
import { PropType } from "vue";
const emits = defineEmits(["change"]);
const props = defineProps({
  text: String,
  data: Object as PropType<any>,
});

const jsonData = ref({});

const isDark = ref(useDark());
const queryLanguages = ref(["javascript", "lodash", "jmespath"]);
watch(
  () => props.text,
  (val) => {
    if (val) {
      jsonData.value = JSON.parse(val);
    }
  },
  {
    immediate: true,
  }
);
watch(
  () => props.data,
  (data) => {
    jsonData.value = data;
    // console.log(jsonData.value);
  },
  {
    immediate: true,
  }
);
onMounted(() => {
  setTimeout(() => {
    watch(
      () => jsonData.value,
      (val) => {
        console.log(val);
        emits("change", val);
      }
    );
  }, 1000);
});
</script>

<style lang="scss">
::-webkit-scrollbar {
  display: none;
}
</style>
